<!DOCTYPE html>
<html lang="en" class="x-admin-sm">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>意见反馈信息列表</title>
	<link rel="stylesheet" href="./assets/css/font.css" />
	<link rel="stylesheet" href="./assets/css/xadmin.css" />
	<link rel="stylesheet" href="./assets/layui/css/layui.css" />
	<script type="text/javascript" src="./assets/layui/layui.js"></script>
	<script type="text/javascript" src="./assets/js/xadmin.js"></script>
</head>

<body>
	<div id="app">
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a href="javascript:;">管理系统</a>
				<a href="javascript:;">意见反馈信息</a>
				<a><cite>意见反馈信息列表</cite></a>
			</span>
		</div>
		<div style="margin-top:8px;"></div>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body">
							<div class="layui-form layui-col-space5">
								<div class="layui-inline layui-show-xs-block">
									<input type="text" v-model="keywords" placeholder="请输入用户" autocomplete="off"
										class="layui-input"></div>
								<div class="layui-inline layui-show-xs-block">
									<button class="layui-btn" title="查询" @click="query()"><i
											class="layui-icon">&#xe615;</i> 查询</button>
								</div>
								<div class="layui-inline layui-show-xs-block">
									<button class="layui-btn layui-btn-danger" title="删除" @click="datadel()"><i
											class="layui-icon layui-icon-delete"></i> 删除</button>
								</div>
								<div class="layui-inline layui-show-xs-block">
									<button class="layui-btn layui-btn-normal" onclick="location.reload()" title="刷新"><i
											class="layui-icon layui-icon-refresh"></i> 刷新</button>
								</div>
							</div>
						</div>
						<div class="layui-card-body layui-table-body layui-table-main">
							<table class="layui-table">
								<thead>
									<tr>
										<th style="text-align: center; width: 5px;">&nbsp;</th>
										<th style="text-align: center">用户</th>
										<th style="text-align: center">标题</th>
										<th style="text-align: center">图片</th>
										<th style="text-align: center">内容</th>
										<th style="text-align: center">发布日期</th>
										<th style="text-align: center">管理回复</th>
										<th style="text-align: center">操作</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="item in complains" :key="item.complainsid">
										<td style="text-align: center"><input type="checkbox" :value="item.complainsid"
												placeholder="请选择" v-model="ids"></td>
										<td style="text-align: center">{{ item.username }}</td>
										<td style="text-align: center">{{ item.title }}</td>
										<td style="text-align: center">{{ item.contents }}</td>
										<td style="text-align: center">{{ item.addtime }}</td>
										<td style="text-align: center">{{ item.status }}</td>
										<td style="text-align: center">{{ item.reps }}</td>
										<td style="text-align: center">
											<span v-if="item.status == '未回复'"><a href="javascript:;" title="回复"
													@click="getComplainsById(item.complainsid)">回复</a>&nbsp;&nbsp;</span>
											<a href="javascript:;" title="删除"
												@click="deleteComplains(item.complainsid)"><i
													class="layui-icon">&#xe640;</i></a>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="layui-card-body">
							<div id="layui" style="text-align: center;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="./assets/js/axios.min.js"></script>
	<script type="text/javascript" src="./assets/js/vue.js"></script>
	<script type="text/javascript" src="./assets/js/jquery.min.js"></script>
	<script type="text/javascript">
		layui.use('table', function () {
			var table = layui.table;
		});
		const vue = new Vue({ // 实例化Vue对象
			el: '#app', // 绑定作用域
			data: { //定义数据 用于vue的双向绑定
				complains: [],
				ids: [], // 定义批量删除的数组
				page: {}, // 定义页面数据
				count: 0, // 定义总页数
				page: 1, // 默认第一页
				limit: 10, // 每页显示行数
				keywords: '', // 查询关键字
			},
			created() { // 生命周期相关的函数
				this.loadTable(); // 调用查询意见反馈信息的方法
			},
			methods: {
				loadTable: function () { // 查询意见反馈信息的函数
					let _this = this;
					axios.get('http://localhost:8080/vue_gxhfztjxt/complains/getComplainsByPage.action?page=' +
						_this.page + '&limit=' + _this.limit).then(result => {
						_this.complains = result.data.data;
						_this.count = result.data.count;
						if (_this.page == 1) {
							_this.loadPage();
						}
					});
				},
				loadPage: function () { // 调用LayUI分页标签的使用
					layui.use(['laypage'], function () {
						const laypage = layui.laypage;
						laypage.render({
							elem: 'layui', // 定义标签显示
							count: vue.count, //数据量
							limit: vue.limit, //每页限制
							jump: function (obj, first) {
								if (!first) {
									vue.page = obj.curr;
									vue.loadTable();
								}
							}
						});
					})
				},
				deleteComplains: function (complainsid) { // 根据主键删除意见反馈信息
					let _this = this;
					if (window.confirm('确定要删除这条记录吗？')) {
						axios.get('http://localhost:8080/vue_gxhfztjxt/complains/deleteComplains.action?id=' +
							complainsid).then(result => {
							if (result.data.code > 0) {
								_this.loadTable();
							} else {
								alert('系统错误，请稍后再试');
							}
						});
					}
				},
				datadel: function () { // 批量删除意见反馈信息
					let _this = this;
					if (window.confirm('确定要批量删除记录吗？')) {
						axios.post('http://localhost:8080/vue_gxhfztjxt/complains/deleteComplainsByIds.action',
							_this.ids).then(result => {
							if (result.data.code > 0) {
								_this.loadTable();
							} else {
								alert('系统错误，请稍后再试');
							}
						});
					}
				},
				status: function (complainsid) {
					let _this = this;
					axios.get('http://localhost:8080/vue_gxhfztjxt/complains/status.action?id=' + complainsid)
						.then(result => {
							if (result.data.code > 0) {
								_this.loadTable();
							} else {
								alert('系统错误，请稍后再试');
							}
						});
				},
				query: function () {
					let _this = this;
					axios.get('http://localhost:8080/vue_gxhfztjxt/complains/getComplains.action?page=' + _this
						.page + '&limit=' + _this.limit + '&keywords=' + _this.keywords).then(result => {
						_this.complains = result.data.data;
						_this.count = result.data.count;
						if (_this.page == 1) {
							_this.loadPage();
						}
					});
				},
				getComplainsById: function (complainsid) { // 编辑按钮点击事件
					let url = 'editcomplains.html?id=' + complainsid;
					xadmin.open('回复意见反馈', url);
				},
			},
		});
	</script>

</body>

</html>